<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>


    <link href="/lib/video-js.css" rel="stylesheet"/>
    <script src="/lib/video.js" type="text/javascript"></script>

    <!-- <link href="http://vjs.zencdn.net/vjs-version/video-js.css" rel="stylesheet"> -->

    <!--<link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>-->
    <!--<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>-->

    <link rel="stylesheet" type="text/css" href="/lib/slicebox/slicebox.css" />
    <link rel="stylesheet" type="text/css" href="/lib/bootstrap.ext.css" />

    <script type="text/javascript" src="/lib/slicebox/modernizr.custom.46884.js"></script>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet"
  href="/lib/animate.min.css">


    <style type="text/css">
  #overlay {
      position: absolute;
      bottom: 30px;
      width:100%;
      text-align: center;
      font-size: 20px;
      z-index: 2147483647;
    }

#overlayStat {
    position: absolute;
    bottom: 50px;
    color: white;
    width:100%;
    text-align: left;
    font-size: 20px;
    z-index: 2147483647;
}

.stat-content{
    background-color: rgba(221, 221, 221, 0.3);
}

  #overlayCountdown {
      position: absolute;
      right: 30px;
      bottom:30px;
      width:100%;
      text-align: right;
      font-size: 50px;
      z-index: 2147483649;
  }
    
.vjs-default-skin.vjs-paused .vjs-big-play-button
{
    display: none;
}
.text-emotion{
    padding-top:3pt;
    font-size:40pt;
    color:white;
}
.img-emotion{
    width:100pt;
}
.div-emotion{
    padding: 20pt;
}

  .div-stat{
      padding: 8pt;
      font-size:20pt;
      width:100%;
      font-family: "楷体","楷体_GB2312";
      color:white;
  }
  .text-stat{
      padding-top:1pt;
      padding-bottom:1pt;
      font-size:22pt;
      color:white;
  }

    </style>



</head>
<body style="background-color: gray">

<br/>
<br/>
<div class="container">

    <div class="row" >

        <div class="col-xs-1">

        </div>
        <div class="col-xs-10 text-center">
            <div id="textCountdown" style = "font-size:80pt;color:white;">准备好了吗</div>
        </div>

        <div class="col-xs-1">

        </div>

    </div>
<br/>
    <div class="row" >
        <ul id="sb-slider" class="sb-slider">
            <li>
                <img id="image1" src="http://localhost:8088/res/merge1.png" alt="image1"/>

            </li>
            <li>
                <img id="image2" src="http://localhost:8088/res/merge2.png" alt="image2"/>
            </li>
        </ul>
    </div>
    <div class="row" >
        <div class="col-md-1-5 div-emotion">
            <div id="text1" class="text-emotion text-center">高兴</div>
        </div>
        <div class="col-md-1-5 div-emotion">
            <div id="text2" class="text-emotion text-center">高兴</div>
        </div>
        <div class="col-md-1-5 div-emotion">
            <div id="text3" class="text-emotion text-center">高兴</div>
        </div>
        <div class="col-md-1-5 div-emotion">
            <div id="text4" class="text-emotion text-center">高兴</div>
        </div>
        <div class="col-md-1-5 div-emotion">
            <div id="text5" class="text-emotion text-center">高兴</div>
        </div>
    </div>


    <!-- <div id="shadow" class="shadow"></div> -->

    <div id="nav-arrows" class="nav-arrows" hidden>
        <a href="#" id="nextFaceButton" >N</a>
        <a href="#">P</a>
    </div>

</div>



<div id="overlayStat" class="container text-center" >
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8 stat-content">

            <div class="text-center">
                <div class="col-md-1-7 text-center" >
                    <div id="divStat1" class="div-stat">
                    </div>
                    <div id="textStat1" class="text-stat"></div>
                </div>
                <div class="col-md-1-7 text-center" >
                    <div id="divStat2" class="div-stat">
                    </div>
                    <div id="textStat2" class="text-stat"></div>
                </div>
                <div class="col-md-1-7 text-center" >
                    <div id="divStat3" class="div-stat">
                    </div>
                    <div id="textStat3" class="text-stat"></div>
                </div>
                <div class="col-md-1-7 text-center" >
                    <div id="divStat4" class="div-stat">
                    </div>
                    <div id="textStat4" class="text-stat"></div>
                </div>
                <div class="col-md-1-7 text-center" >
                    <div id="divStat5" class="div-stat">
                    </div>
                    <div id="textStat5" class="text-stat"></div>
                </div>
                <div class="col-md-1-7 text-center" >
                    <div id="divStat6" class="div-stat">
                    </div>
                    <div id="textStat6" class="text-stat"></div>
                </div>
                <div class="col-md-1-7 text-center" >
                    <div id="divStat7" class="div-stat">
                    </div>
                    <div id="textStat7" class="text-stat"></div>
                </div>
            </div>

        </div>
        <div class="col-md-2"></div>
    </div>


</div>



<script src="/lib/socket.io.js"></script>
<script src="/lib/moment.min.js"></script>
<script src="/js/app.js"></script>
<script src="/lib/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/lib/slicebox/jquery.slicebox.js"></script>
<script>

    var socket =  io.connect(ServerUrl);

    var imageIndex = 0;
    var cdinterval;

    socket.on('connect', function() {
        console.log("Client has connected to the server!");
    });

    socket.on('next-round', function(data) {
        countdown();
    });

    socket.on('face', function(data) {

        $('#text1').text("");
        $('#text2').text("");
        $('#text3').text("");
        $('#text4').text("");
        $('#text5').text("");

        var faces = data.result.faces;

        initStat(data.stat);

        if(faces.length == 0){
            countdown();
        }

        imageIndex++;

        var nowIndex = imageIndex % 2 + 1;

        $('#image' + nowIndex).attr('src',ResUrl + data.result.face_merge_photo);

        console.log('#image' + nowIndex);
        console.log(data.result.face_merge_photo);

        var faces = data.result.faces;

        var faceCount = faces.length > FaceCount ? FaceCount : faces.length;

        for(var i = 0 ; i < faceCount ; ++i)
        {
            var face = faces[i];

            var emotion = face.attributes.emotion;
            var emotionText = "";
            if(emotion.surprise > 60){
                emotionText = "惊讶";
            }
            else if(emotion.happiness > 60){
                emotionText = "高兴";
            }
            else if(emotion.neutral > 60){
                emotionText = "平静";
            }
            else if(emotion.sadness > 60){
                emotionText = "伤心";
            }
            else if(emotion.disgust > 60){
                emotionText = "厌恶";
            }
            else if(emotion.anger > 60){
                emotionText = "生气";
            }
            else if(emotion.fear > 60){
                emotionText = "惊恐";
            }else{
                emotionText = "平静";
            }

            $('#text' + (i+1)).text(emotionText);

//            $('#img' + (i+1)).attr('src',ResUrl + "/res/" + face.face_photo);

            console.log('#img' + (i+1));

            $('#div' + (i+1)).show();


            $("#nextFaceButton").trigger('click')

            $('#text1').addClass('animated fadeInUp');
            $('#text2').addClass('animated fadeInUp');
            $('#text3').addClass('animated fadeInUp');
            $('#text4').addClass('animated fadeInUp');
            $('#text5').addClass('animated fadeInUp');


        }

    });



    socket.on('disconnect', function() {
        console.log("The client has disconnected!");
    });

    function sendDisconnect() {
        socket.disconnect();
    }

    function sendMessage() {


        var jsonObject = {};
        socket.emit('chatevent', jsonObject);
    }

    function faceDetect(){

        var jsonObject = {};

        socket.emit('face', jsonObject);

    }

    function countdown(){

        $('#text1').removeClass('animated fadeInUp');
        $('#text2').removeClass('animated fadeInUp');
        $('#text3').removeClass('animated fadeInUp');
        $('#text4').removeClass('animated fadeInUp');
        $('#text5').removeClass('animated fadeInUp');

        var countdown = 3;
        clearInterval(cdinterval);
        cdinterval = setInterval(function(){

            $('#textCountdown').show();
            $('#textCountdown').text(countdown.toString());
            countdown -= 1;

            if(countdown < 0){
                $('#textCountdown').text("你好吗");
                clearInterval(cdinterval);
                faceDetect();
            }

        },1000)
    }


    countdown();


    function initStat(stat){
        $('#divStat1').text("惊讶");
        $('#divStat2').text("高兴");
        $('#divStat3').text("平静");
        $('#divStat4').text("伤心");
        $('#divStat5').text("厌恶");
        $('#divStat6').text("生气");
        $('#divStat7').text("害怕");

        $('#textStat1').text(stat.surprise);
        $('#textStat2').text(stat.happiness);
        $('#textStat3').text(stat.neutral);
        $('#textStat4').text(stat.sadness);
        $('#textStat5').text(stat.disgust);
        $('#textStat6').text(stat.anger);
        $('#textStat7').text(stat.fear);
    }

    $("#startButton").on('click', function () {
        countdown();
        $('.vjs-fullscreen-control').click();
        $("#startButton").hide();
    });


    $(function() {

        var Page = (function() {

            var $navArrows = $( '#nav-arrows' ).hide(),
                $navDots = $( '#nav-dots' ).hide(),
                $nav = $navDots.children( 'span' ),
                $shadow = $( '#shadow' ).hide(),
                slicebox = $( '#sb-slider' ).slicebox( {
                    onReady : function() {

                        $navArrows.show();
                        $navDots.show();
                        $shadow.show();

                    },
                    onBeforeChange : function( pos ) {

                        $nav.removeClass( 'nav-dot-current' );
                        $nav.eq( pos ).addClass( 'nav-dot-current' );

                    }
                } ),

                init = function() {

                    initEvents();

                },
                initEvents = function() {

                    // add navigation events
                    $navArrows.children( ':first' ).on( 'click', function() {

                        slicebox.next();

                        return false;

                    } );

                    $navArrows.children( ':last' ).on( 'click', function() {

                        slicebox.previous();
                        return false;

                    } );

                    $nav.each( function( i ) {

                        $( this ).on( 'click', function( event ) {

                            var $dot = $( this );

                            if( !slicebox.isActive() ) {

                                $nav.removeClass( 'nav-dot-current' );
                                $dot.addClass( 'nav-dot-current' );

                            }

                            slicebox.jump( i + 1 );
                            return false;

                        } );

                    } );

                };

            return { init : init };

        })();

        Page.init();

    });




</script>
</body>
</html>